<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>用户地图</title>
    <script src="/js/vuejs-2.5.16.js"></script>
    <script src="/js/axios-0.18.0.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=5Q0CaLyGsekZ5e4ELM8FYZAN4r1zAtZO"></script>
</head>
<body>
<div id="app"></div>
<div id="container"></div>
</body>
</html>
<script>

    const vm = new Vue({
        el: "#app",
        data: {
            location: {},
            longitude: '',
            latitude: '',
            address: ''
        },
        methods: {

            getLocation(userId) {
                axios.get("/user/map?userId=" + userId).then(resp => {
                    this.location = resp.data;
                    this.longitude = this.location.longitude;
                    this.latitude = this.location.latitude;
                    this.address = this.location.address;
                    baidu(this.longitude, this.latitude, this.address);
                })
            }
        },
        created() {
            let userId = location.search.split("=")[1];
            this.getLocation(userId);
        }
    });

    function baidu(longitude, latitude, address) {
        // 创建地图实例
        var map = new BMapGL.Map('container');

        // 指定点坐标
        var point = new BMapGL.Point(longitude, latitude);

        console.log(longitude);

        // 初始化地图
        map.centerAndZoom(point, 15);

        // 开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true);

        // 创建点标记
        var marker = new BMapGL.Marker(point);
        // var marker = new BMapGL.Marker(new BMap.point(longitude,latitude),{icon:icon});
        map.addOverlay(marker);
        // 创建信息窗口
        var opts = {
            width: 200,// 信息窗口宽度
            height: 100,// 信息窗口高度
            title: address// 信息窗口标题
        };
        var infoWindow = new BMapGL.InfoWindow('地址:' + address, opts);// 创建信息窗口对象

        // 点标记添加点击事件
        marker.addEventListener('click', function () {
            map.openInfoWindow(infoWindow, point); // 开启信息窗口
        });
    }
</script>
<script>

</script>
